<template>
  <div
    class="annotation-point"
    :class="{ 'editing': isEditing, 'preview': isPreview, 'mobile': isMobile }"
    :style="pointStyle"
    @click="handleClick"
    @touchstart="handleTouchStart"
    @touchend="handleTouchEnd"
    @mouseenter="handleMouseEnter"
    @mouseleave="handleMouseLeave"
  >
    <div class="point-marker">
      <el-icon><Location /></el-icon>
    </div>
    
    <!-- 编辑模式下的标签 -->
    <div v-if="!isPreview" class="point-label">
      {{ annotation.buildingName }}
    </div>
    
    <!-- 预览模式下的悬浮提示 -->
    <div
      v-if="isPreview && showTooltip"
      class="custom-tooltip"
      :class="{ 'mobile': isMobile }"
    >
      {{ annotation.buildingName }}
    </div>
  </div>
</template>

<script>
import { Location } from '@element-plus/icons-vue'

export default {
  name: 'AnnotationPoint',
  components: {
    Location
  },
  props: {
    annotation: {
      type: Object,
      required: true
    },
    isEditing: {
      type: Boolean,
      default: false
    },
    isPreview: {
      type: Boolean,
      default: false
    },
    containerWidth: {
      type: Number,
      default: 800
    },
    containerHeight: {
      type: Number,
      default: 600
    }
  },
  data() {
    return {
      showTooltip: false,
      touchStartTime: 0,
      isMobile: false,
      hoverTimer: null,
      leaveTimer: null
    }
  },
  computed: {
    pointStyle() {
      return {
        left: `${this.annotation.left}%`,
        top: `${this.annotation.top}%`,
        transform: 'translate(-50%, -50%)'
      }
    }
  },
  mounted() {
    this.detectMobile()
    window.addEventListener('resize', this.detectMobile)
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.detectMobile)
    // 清理定时器
    if (this.hoverTimer) {
      clearTimeout(this.hoverTimer)
    }
    if (this.leaveTimer) {
      clearTimeout(this.leaveTimer)
    }
  },
  methods: {
    detectMobile() {
      this.isMobile = window.innerWidth <= 768 || /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
    },

    handleClick(event) {
      event.stopPropagation()
      console.log("annotation=999",this.annotation)
      this.$emit('onPoint', this.annotation)
    },

    handleTouchStart(event) {
      event.stopPropagation()
      this.touchStartTime = Date.now()

      // 移动端显示标题提示
      if (this.isPreview && this.isMobile) {
        this.showTooltip = true
        setTimeout(() => {
          this.showTooltip = false
        }, 2000)
      }
    },

    handleTouchEnd(event) {
      event.stopPropagation()
      const touchDuration = Date.now() - this.touchStartTime

      // 短按触发点击事件
      if (touchDuration < 500) {
        this.$emit('click', this.annotation)
      }
    },

    // 防抖的鼠标进入事件
    handleMouseEnter() {
      if (this.isMobile) return

      // 清除离开定时器
      if (this.leaveTimer) {
        clearTimeout(this.leaveTimer)
        this.leaveTimer = null
      }

      // 设置进入定时器
      if (!this.showTooltip) {
        this.hoverTimer = setTimeout(() => {
          if (this.isPreview) {
            this.showTooltip = true
          }
        }, 100) // 100ms延迟，避免快速移动时的抖动
      }
    },

    // 防抖的鼠标离开事件
    handleMouseLeave() {
      if (this.isMobile) return

      // 清除进入定时器
      if (this.hoverTimer) {
        clearTimeout(this.hoverTimer)
        this.hoverTimer = null
      }

      // 设置离开定时器
      if (this.showTooltip) {
        this.leaveTimer = setTimeout(() => {
          this.showTooltip = false
        }, 50) // 50ms延迟，避免快速移动时的闪烁
      }
    }
  }
}
</script>

<style scoped>
.annotation-point {
  position: absolute;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
  /* 确保悬停区域稳定 */
  padding: 4px;
  margin: -4px;
}

.annotation-point.preview {
  /* 预览模式下增加稳定的悬停区域 */
  padding: 8px;
  margin: -8px;
}

.point-marker {
  width: 24px;
  height: 24px;
  background: #409eff;
  border: 2px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.annotation-point:hover .point-marker {
  background: #67c23a;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(103, 194, 58, 0.3);
}

.annotation-point.editing .point-marker {
  background: #e6a23c;
  animation: pulse 2s infinite;
}

.annotation-point.preview .point-marker {
  background: #409eff;
}

.point-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  margin-top: 4px;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 自定义tooltip样式 */
.custom-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  margin-bottom: 8px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none; /* 防止tooltip阻挡鼠标事件 */
  z-index: 1000;
  opacity: 0;
  animation: tooltipFadeIn 0.2s ease forwards;
}

.custom-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.9);
}

.custom-tooltip.mobile {
  bottom: auto;
  top: 100%;
  margin-bottom: 0;
  margin-top: 8px;
  font-size: 13px;
  padding: 8px 12px;
  max-width: 160px;
}

.custom-tooltip.mobile::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: rgba(0, 0, 0, 0.9);
}

@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(230, 162, 60, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(230, 162, 60, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(230, 162, 60, 0);
  }
}

/* 移动端优化 */
.annotation-point.mobile .point-marker {
  width: 32px;
  height: 32px;
  font-size: 14px;
  border-width: 3px;
}

.annotation-point.mobile:hover .point-marker {
  background: #67c23a;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(103, 194, 58, 0.3);
}

.annotation-point.mobile .point-label {
  font-size: 12px;
  padding: 6px 10px;
  margin-top: 8px;
  max-width: 140px;
  background: rgba(0, 0, 0, 0.9);
  border-radius: 6px;
}

/* 移动端触摸反馈 */
.annotation-point.mobile.preview .point-marker {
  transition: all 0.2s ease;
}

.annotation-point.mobile.preview:active .point-marker {
  transform: scale(0.95);
  background: #67c23a;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .annotation-point:not(.mobile) .point-marker {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .annotation-point:not(.mobile) .point-label {
    font-size: 11px;
    padding: 4px 8px;
    max-width: 120px;
  }
}
</style>
